<template>
  <div class="subPage" >
    <div class="modalClass" v-if="maskModal" @click="showLineUp">
      <img :src="room_hint"  style="position: absolute;bottom: 30rpx;left:155rpx;width:417rpx;height:300rpx;z-index: 10000000001;"> 
      <!-- <span  class="maskBtn" @click="lineUp(listData)" style="z-index: 9999999999999999999999999999;height:92rpx;">开始排队</span> -->
    </div>
    <div class="navBox" v-if="userMsgList.length > 1 && !verificationModal" @click="maskModal=false">
      <img v-if="userMsgList.length > 1"  :src="arrow_left_dark_circle" @click.stop="navClick(1)">
      <img v-if="userMsgList.length > 1" :src="arrow_right_dark_circle" @click.stop="navClick(2)">
      <!-- <img v-if="userMsgList.length == 1" :src="arrow_left_light_circle">
      <img v-if="userMsgList.length == 1" :src="arrow_right_light_circle"> -->
    </div>
    <div class="noItem" v-if="userMsgList.length == 0 && !initLoading">
        <div style="z-index:999">
          <div class="noImgBox">
            <img :src="view_empty_apt_placeholder">
          </div>
          <div class="txtBox">
            <div class="name">暂无挂号</div>
            <div class="msg">没有您的云诊间叫号信息</div>
          </div>
          <button class="fotBtn" open-type="getUserInfo"  plain="true" @getuserinfo="toAppointmentDetails">
            <img :src="leftIcon">
            <span class="blueClass">立即挂号</span>
          </button>
          <div :class="['bomTit',{'isIpx':ifIphonex}]">
            <div>武汉大学人民医院</div>
            <div>湖北省人民医院</div>
          </div>
        </div>
      </div>
    <div class="outlineBox">
      <div class="listBox" :style="{'left':pageLeft+'rpx'}">
        <div class="listItem" v-if="userMsgList.length != 0" v-for="(item, index) in userMsgList" :key="index">
          <div class="topBox">
            <div class="titName">候诊人</div>
            <div class="userName" >{{item.regular_name ? item.regular_name : ''}}</div>
          </div>
          <div class="centerBox">
            <div class="titClass"><span class="leftNav"></span>预约信息</div>
            <div class="numClass">预约编号：<span>{{item.apt_id}}</span></div>
          <!-- </div>
          <div> -->
            <div class="userBox">
              <span class="nameClass" v-if="item.doctor_name">{{item.doctor_name ? item.doctor_name : ''}}&nbsp;&nbsp;<span class="deptClass">{{item.dept_name ? item.dept_name : ''}}{{item.positional_title ? '/' + item.positional_title : ''}}</span></span>
              <span class="nameClass" v-if="!item.doctor_name"><span class="deptClass">{{item.dept_name ? item.dept_name : ''}}{{item.positional_title ? '/' + item.positional_title : ''}}</span></span>
            </div>
            <div class="timeBox">
              <span >就诊时间：&nbsp;<span>{{item.arrange_day}}</span>&nbsp;&nbsp;<span>{{item.begin_time}}-{{item.end_time}}</span></span>
            </div>
          </div>
          <div class="bomBox">
            <div class="titClass"><span class="leftNav2"></span>排队信息</div>
            <div class="msgBox" v-if="item.detect_result == 0 && item.apt_diagnose_end_time*1000 > currentTime">请点击开始排队,完成人脸验证！</div>
            <div class="msgBox" v-else-if="item.detect_result == 0 && item.apt_diagnose_end_time*1000 < currentTime">就诊时间已过,请尽快完成人脸验证！</div>
            <!-- <div class="msgBox" v-else-if="item.detect_result == 1 && (item.apt_diagnose_time*1000 <= currentTime)  && (currentTime <= item.apt_diagnose_end_time*1000)" >您的就诊时间已到,医生正在接诊中,请耐心等待！</div> -->
            <div class="msgBox" v-else-if="item.detect_result == 1 && (item.apt_diagnose_time*1000 <= currentTime)" >您的就诊时间已到,医生正在接诊中,请耐心等待！</div>
            <div class="msgBox" v-else-if="item.detect_result == 1 && (item.apt_diagnose_time*1000 >= currentTime)">排队成功,请耐心等待医生呼叫！</div>
            <!-- <div class="msgBox" v-else-if="item.detect_result == 1 && (item.apt_diagnose_end_time*1000 <= currentTime)">排队成功,请耐心等待医生呼叫！</div> -->
            <div class="msgBox" v-else-if="item.detect_result == 1 && item.status == '02'">您正在就诊中！</div>
          <!-- </div>
          <div> -->
            <div class="codeBox">
              <span class="labelClass">前方还有：&nbsp;<span v-if="item.detect_result == 1  && item.current_num != -1">{{item.current_num}}位</span><span v-if="item.detect_result == 0 || item.current_num == -1">-位</span></span>
              <span class="labelClass">你的号码：&nbsp;<span v-if="item.detect_result == 1" class="redClass">{{item.apt_seq}}号</span><span v-if="item.detect_result == 0" class="redClass">-号</span></span>
            </div>
          </div>
          <div :class="['fotBox',{'isIpx':ifIphonex}]">
            <div v-if="item.detect_result == 0" class="verifyTips">
              请您点击"开始排队"，就诊人无法完成人脸验证时，可选择注册人进行人脸验证，请确保信息真是可靠，否则自行承担法律责任
            </div>
            <div class="btnBox" v-if="item.detect_result == 0">
              <span @click="saveNowAptId(item)" class="btnLeft btnClass" >开始排队</span>
              <!-- <span @click="toUploadMsg(item)" class="btnClass colorB" v-else>上传病例</span> -->
              <span class="btnRight btnClass" @click="isCancle(item)">申请退款</span>
            </div>
            <div class="btnBox" v-if="item.detect_result == 1">
              <!-- <span @click="lineUp(item)" class="btnLeft btnClass">开始排队</span> -->
              <!-- <span @click="toUploadMsg(item)" class="btnClass colorB" v-else>上传病例</span> -->
              <span class="btnCenter btnClass alreadyChat" v-if="item.status == '02'">视频中断，请等待医生呼入</span>
              <span class="btnCenter btnClass " v-else @click="isCancle(item)">申请退款</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="chooseAccount" v-if="verificationModal">
      <div class="modalBox">
        <!-- <div class="modalTit">
            <img src="/static/images/videoTit.png">
          </div> -->
        <div class="closeBox" @click="verificationModal=false">
          <img :src="closeImg" />
        </div>
        <div class="modalCenter">
          <picker-view indicator-style="height: 50px;" style="width:100%;height:150px" :value="0" @change="bindPickerChange">
              <picker-view-column>
                <view class="picker" v-for="item in userList" :key="item.regular_id" style="line-height: 50px; text-align: center;color:rgba(34, 75, 198, 1);font-size:40rpx">{{item.regular_name}}</view>
              </picker-view-column>
          </picker-view>
        </div>
        <div class="modalFooter">
          <div class="btnLeft" @click="verificationModal=false">取消</div>
          <div class="btnRight" @click="lineUp(userList[hx_index])">确认</div>
        </div>
      </div>
    </div>
    <!-- <div class="modalClass" v-if="modalStyle" >
        <div class="modalBox">
          <div class="modalCenter">
            您确定要取消此次预约么！
          </div>
          <div class="modalFooter">
            <div class="btnLeft" @click="close">取消</div>
            <div class="btnRight" @click="ok">确认</div>
          </div>
        </div>
      </div> -->
      <!-- 申请退款 -->
    <div v-if="visible" class="bg">
      <div class="init">
        <div class="initTop">
          退款原因
          <img v-if="imgUrl" :src="imgUrl + 'closeTips.png'" @click="close" />
        </div>
        <div class="initMid">
          <div style="margin-left: 30rpx;">
            <radio-group @change="changeRadio">
              <radio class="radio" value="0" color="#507BFC">
                <text>临时有事</text>
              </radio>
              <br />
              <radio class="radio" value="1" color="#507BFC">
                <text>挂错了/多挂了/不想挂</text>
              </radio>
              <br />
              <radio class="radio lastRadio" value="2" color="#507BFC">
                <text>其他原因</text>
              </radio>
              <br />
            </radio-group>
          </div>
          <div class="areaDiv clearfix" v-if="reason_code==2">
            <textarea
              placeholder="其他原因"
              disable-default-padding="true"
              maxlength="100"
              :value="reason"
              @input="inputchange"
            />
            <div class="fr" style="color: #CCCCCC; font-size: 30rpx;">{{reason.length}} / 100 字</div>
          </div>
        </div>
        <div class="initBtm" @click="requestRefund">
          <div>提交</div>
        </div>
      </div>
    </div>
    <!-- <div class="modalClass highterZIndex" v-if="initLoading"></div> -->
    <i-toast id="toast" />
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  import storage from '@/utils/storage'
  import api from '@/api/api'
  // import Bus from '@/utils/bus.js'
  // const { $Toast, $Message } = require('../../../../../static/iview/base')
  const { $Toast, $Message } = require('../../../../../static/iview/base');
  // const { $Toast, $Message } = require('../../../../../static/iview/base');
//   import visitingTips from '@/components/visitingTips.vue'
  export default {
    components: {
    //   visitingTips
    },
    computed: {
      ...mapState([
        'ifIphonex'
      ])
    },
    data () {
      return {
        userInfo: {},
        visible: false,
        maskModal: false,
        hx_index: 0,
        userList: [],
        pageLeft: '0',
        userId: '',
        verificationModal: false,
        reason: "",
        BizToken: '',
        userDetails: {
          regular_name: '',
          regular_certid: '',
          regular_phone: ''
        },
        pageIndex: 0,
        listData: {},
        userMsgList: [],
        currentTime: '',
        clearTimeSet: null,
        imgUrl: '',
        arrow_left_dark_circle: '',
        arrow_left_light_circle: '',
        arrow_right_dark_circle: '',
        arrow_right_light_circle: '',
        view_empty_apt_placeholder: '',
        room_hint: '',
        modalData: {},
        leftIcon: '',
        overX: 'hidden',
        reason_code: "",
        closeImg: "",
        nowAptId: "",
        initLoading: true // 初始化加载数据loading
      }
    },
    mounted () {
      
    },
    onUnload () {
      let that = this
      clearInterval(that.clearTimeSet);
      let apt_id = that.$storage.getAptId()
      if (apt_id) {
        that.$storage.removeAptId()
        that.pageIndex = 0
      }
    },
    onLoad (options) {
      let that = this
      that.visible = false
      that.maskModal = false
      that.initLoading = true
      that.hx_index = 0
      that.pageIndex = 0
      that.pageLeft = 0
      that.userList = []
      that.userMsgList = []
      that.reason =  ""
      that.reason_code = ""
      that.overX = 'hidden'
      that.currentTime = ''
      that.userId = ''
      that.BizToken = ''
      that.modalData = {}
      that.imgUrl = api.imgUrl
      that.arrow_left_dark_circle = that.imgUrl + 'arrow_left_dark_circle.png'
      console.log(that.arrow_left_dark_circle)
      that.arrow_left_light_circle = that.imgUrl + 'arrow_left_light_circle.png'
      that.arrow_right_dark_circle = that.imgUrl + 'arrow_right_dark_circle.png'
      that.arrow_right_light_circle = that.imgUrl + 'arrow_right_light_circle.png'
      that.view_empty_apt_placeholder = that.imgUrl + 'view_empty_apt_placeholder.png'
      that.closeImg = that.imgUrl + "close.png";
      that.room_hint = that.imgUrl + 'room_hint.gif'
      that.leftIcon = that.imgUrl + 'leftIcon.png'
      that.userDetails = {
          regular_name: '',
          regular_certid: '',
          regular_phone: ''
      },
      that.userInfo = {}
      let apt_id = that.$route.query.apt_id
      console.log(apt_id,'apt_id')
      if (apt_id) {
        that.$storage.setAptId(apt_id)
        console.log(that.$storage.getAptId())
      }
      var token = this.$storage.getToken();
      if(token) {
        that.getUserInfo()
        that.getRegularList()
      } else {
        this.initLoading = false
      }
      that.currentTime = new Date().getTime(); 
      console.log('当前时间',that.currentTime)
      that.clearTimeSet=setInterval(() => {
        that.currentTime = new Date().getTime(); 
      }, 1000);
    },
    methods: {
      // 文本框改变
      inputchange(e) {
        let stringStr = e.target.value.substring(0, 1);
        this.reason = e.target.value;
        if (stringStr == " ") {
          this.reason = this.reason.substring(1, this.reason.length);
        }
      },
      //确定退款
    requestRefund() {
        var that = this;
        let data = {
          apt_id: that.modalData.apt_id,
          cancel_reason_code: that.reason_code,
          reason_text: that.reason
        };
        that.$api.requestRefund(data, { showLoading: false }).then(res => {
          if (res.code == 0) {
            $Toast({
              content: "退款申请成功",
              type: "success"
            });
            that.visible = false
            // that.queryDetails();
            let apt_id = that.$storage.getAptId()
            if (apt_id) {
              that.$storage.removeAptId()
              that.pageIndex = 0
            }
            that.getUserInfo(1)
            window.scrollTo(0,0)
          } else {
            $Toast({
              content: "退款申请失败",
              type: "warning"
            });
          }
        });
      },
      changeRadio(e) {
        console.log(e.mp.detail.value);
        this.reason_code = e.mp.detail.value;
      },
      showLineUp () {
        console.log('666s')
        this.maskModal = false
        this.overX = 'auto'
      },
      toAppointmentDetails (e) {
        let that = this
        if (e.mp.detail.rawData) {
          //用户按了允许授权按钮
          console.log("用户按了允许授权按钮");
          //判断是否登陆(是否有患者token)
          var token = this.$storage.getToken();
          if (token) {
            //判断是否认证
            that.$api
              .get_user_info("", { showLoading: true })
              .then(function (data) {
                let accountInfo = data.data[0];
                accountInfo.headImg = data.data[0].head_portrait
                  ? data.data[0].head_portrait
                  : "";
                that.$storage.setAccountInfo(accountInfo);
                if (accountInfo.netease_token) {
                  nim.login(accountInfo);
                }
                if (data.data[0].isreal == 0) {
                  // '未认证' 去认证
                  that.$router.push("/pages/qualification/main");
                } else if (data.data[0].isreal == 1) {
                  // '已认证' 
                  that.$router.replace(`/pages/subPage/register/dept/main?video=${0}`);
                }
              });
          } else {
            //跳转登录页
            // console.log('用户未登录')
            let that = this;
            mpvue.login({
              success(res) {
                if (res.code) {
                  that.$utils.showToast("text", "请先登录");
                  setTimeout(() => {
                    that.$router.push("/pages/center/child/login/main");
                  }, 500);
                  return
                  that.$api.wechatLogin({ code: res.code }).then((data) => {
                    that.openid = data.data.openid;
                    that.key = data.data.session_key;
                    if (data.data.token) {
                      that.$storage.setToken(data.data.token);
                      that.$router.replace(`/pages/subPage/register/dept/main?video=${0}`);
                    } else {
                      that.$router.push("/pages/center/child/login/main");
                    }
                  });
                } else {
                  that.$router.push("/pages/center/child/login/main");
                  // console.log('用户未登录')
                }
              },
            });
          }
        } else {
          //用户按了拒绝按钮
          console.log("用户按了拒绝按钮");
        }
      },
      navClick (e) {
        // console.log(this.$refs.item)
        this.visible = false
        // this.maskModal = true
        let apt_id = this.$storage.getAptId()
        if (apt_id) {
          this.$storage.removeAptId()
        }
        if (e == 1) {
          // console.log(e.changedTouches[0].clientX)
          // if (this.pageLeft != 0) {
          //   this.pageLeft - 1
          // }
          // if (this.pageLeft != (this.userMsgList.length)*750) {
          //   this.pageLeft += 750
          // }
          
          if (this.pageIndex > 0) {
            this.pageLeft += 750
            this.pageIndex = this.pageIndex - 1
          } else {
            this.$utils.showToast('text', '暂无更多')
            return
          }
          // console.log(this.pageIndex)
        } else {
          if (this.pageIndex < this.userMsgList.length-1) {
            this.pageLeft -= 750
            this.pageIndex = this.pageIndex + 1
          } else {
           this.$utils.showToast('text', '暂无更多')
           return
          }
          // if (this.pageLeft != this.userMsgList.length) {
          //   this.pageLeft + 1
          // }
          // if (this.pageLeft != ('-'+this.userMsgList.length)*750) {
          //   this.pageLeft -= 750
          // }
          
          // console.log(e.changedTouches[0].clientX)
        }
         if (this.userMsgList[this.pageIndex].detect_result == 0) {
              this.maskModal = true
              let that = this
              setTimeout(() => {
                that.overX = 'hidden'
              }, 500)
              
          } else {
              this.maskModal = false
              let that = this
              setTimeout(() => {
                that.overX = 'auto'
              }, 500)
          }
          console.log(this.pageIndex,'当前页码')
          console.log(this.pageLeft,'当前距离',this.maskModal)
      },
      isCancle (item) {
        this.reason = "";
        this.visible = true
        this.modalData = item
      },
      toUploadMsg (item) {
        this.$router.push(`/pages/subPage/register/uploadMsg/main?doctorInfo=${JSON.stringify(item)}`)
      },
      getInfo () {
        this.initLoading = true
        this.$api.getConsultingRoomInfo({}, ({'showLoading': true})).then(res => {
          console.log(res)
          wx.showLoading({
            title: "加载中",
            mask: true,
          });
          this.userMsgList = res.data
          // this.userMsgList = [{doctor_name: '王教授',detect_result:0,positional_title: '副主任医生',dept_name:'心血管内科',apt_id:'B2004090001'},{doctor_name: '王教授',detect_result:0,positional_title: '副主任医生2',dept_name:'心血管内科',apt_id:'B2004090002'},{doctor_name: '王教授',detect_result:0,positional_title: '副主任医生3',dept_name:'心血管内科',apt_id:'B2004090003'}]
          let apt_id =  this.$storage.getAptId()
          console.log(apt_id,'apt_id')
          // let apt_id = 'B2004090002'
          if (apt_id) {
            this.userMsgList.forEach((item,index) => {
              if (apt_id == item.apt_id && apt_id) {
                console.log(item)
                this.pageIndex = index
                if (this.pageLeft == 0) {
                  this.pageLeft -= 750*this.pageIndex
                }
                if (item.detect_result == 0) {
                  this.maskModal = true
                  this.overX = 'hidden'
                } else {
                  this.maskModal = false
                  this.overX = 'auto'
                }
              }
            })
          } else {
            this.listData = res.data[0]
            console.log(this.listData)
            if (this.listData && this.listData.detect_result == 0) {
              this.maskModal = true
              this.overX = 'hidden'
            } else {
              this.maskModal = false
              this.overX = 'auto'
            }
          }
          // this.userMsgList = []
          this.userDetails.regular_name = this.userMsgList[0]?this.userMsgList[0].regular_name:''
          this.userMsgList.forEach((item, index) => {
            if (item.arrange_day) {
              item.arrange_day = item.arrange_day.slice(0, 4) + '年' + item.arrange_day.slice(4);
              item.arrange_day = item.arrange_day.slice(0, 7) + '月' + item.arrange_day.slice(7);
              item.arrange_day = item.arrange_day.slice(0, 10) + '日' + item.arrange_day.slice(10);
            }
            if (item.begin_time) {
              item.begin_time = item.begin_time.slice(0, 2) + ':' + item.begin_time.slice(2);
              item.begin_time = item.begin_time.substring(0, item.begin_time.length -2)
            }
            if (item.end_time) {
              item.end_time = item.end_time.slice(0, 2) + ':' + item.end_time.slice(2);
              item.end_time = item.end_time.substring(0, item.end_time.length -2)
            }
          })
          console.log(this.userMsgList)
          setTimeout(() => {
            this.initLoading = false
            wx.hideLoading()
          }, 300);
        })
      },
      lineUp (e) {
        let params = JSON.parse(JSON.stringify(e))
        params.apt_id = this.nowAptId
        this.getBizToken(params)
      },
      showModal () {
        this.visible = true
      },
      selectUser () {
        this.userList.forEach((item, index)=>{
          if (item.regular_id == this.userId) {
            this.userDetails = item
            return;
          }
        })
      },
      getRegularList () {
        this.$api.regularList({}, ({'showLoading': true})).then(res => {
          let list = []
          // res.data.push({is_default: 1, regular_name: '哈哈'})
          res.data.forEach((item => {
            if (item.is_default == 1) {
              list.unshift(item)
            } else {
              list.push(item)
            }
          }))
          this.userList = list
        })
      },
      close () {
        this.visible = false
        this.hx_index = 0
      },
      ok () {
        this.$api.isCancle({apt_id: this.modalData.apt_id}, ({'showLoading': true})).then(res => {
            this.visible = false
            this.getUserInfo(1)
          })
        // this.userId = this.userList[this.hx_index].regular_id
        // this.selectUser()
      },
      bindPickerChange (e) {
        this.hx_index = e.mp.detail.value
        this.nowRegularId = this.userList[this.hx_index].regular_id
      },
      getUserInfo (e) {
        this.$api.userInfo({}, ({'showLoading': true})).then(res => {
            console.log(res.data)
            this.userInfo = res.data[0]
            // this.getBizToken()
            this.getInfo()
          })
      },
      getBizToken (e) {
        this.$api.getBizToken({regular_id: e.regular_id}, ({'showLoading': true})).then(res => {
            console.log(res.data)
            // BizToken = res.data
            this.BizToken = res.data
            this.verificationModal = false
            this.to(res.data,e)
          // console.log(BizToken)
        })
      },
      getDetectResult (e,data) {
        console.log('核身id',e)
        console.log('当前数据', data)
        this.$api.getDetectResult({apt_id:data.apt_id, biz_token: e}, ({'showLoading': true})).then(res => {
           console.log('核身完成调用详情接口')
          this.getUserInfo(1)
        })
      },
      to (e,data) {
        // let BizToken =  ''
          // 调用实名核身功能
          wx.startVerify({
              data: {
                  token: e // BizToken
              },
              success: (res) => { // 验证成功后触发
                  // res 包含验证成功的token, 这里需要加500ms延时，防止iOS下不执行后面的逻辑
                  setTimeout(() => {
                      // 验证成功后，拿到token后的逻辑处理，具体以客户自身逻辑为准
                      this.maskModal = false
                      this.overX = 'auto'
                      console.log('核身完成调用完成接口')
                      this.getDetectResult(e,data)
                      // this.getUserInfo(1)
                  }, 500);
              },
              fail: (err) => {  // 验证失败时触发
                  // err 包含错误码，错误信息，弹窗提示错误
                  setTimeout(() => {
                      wx.showModal({
                          title: "提示",
                          content: err.ErrorMsg,
                          showCancel: false
                      })
                  }, 500);
              }
          })
      },
      saveNowAptId (e) {
        let list = []
        this.userList.forEach(ele => {
          if (ele.is_main === '1') { // 判断是否为主账号
            list.push(ele)
          } else if (e.regular_id === ele.regular_id){
            list.push(ele) 
          }
        })
        this.userList = list
        this.nowAptId = e.apt_id
        if (this.userList.length === 1) {
          this.lineUp(this.userList[0])
        } else {
          this.verificationModal = true
        }
      }
    },
    onShow () {
    },
    watch: {
      sessionsList: function(oldValue, newValue) {
        // this.dealData()
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    // display: flex;
    // flex-direction: column;
    background: #fff;
    // overflow-x: auto;
    // overflow-y: hidden;
    display: flex;
    flex-direction: column;
    // flex-direction: row;
    // position: relative;
  }
  .maskBtn{
    display: inline-block;
        width:330rpx;
        height:90rpx;
        border-radius:2rpx;
        border:1rpx solid rgba(204,204,204,1);
        font-size:36rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        text-align: center;
        line-height: 90rpx;
        background: #4253E1;
        color:#FFFFFF;
        position: absolute;
        bottom: 27rpx;
        left: 30rpx;
  }
  .navBox{
    display: flex;
    width: 100%;
    height: 80rpx;
    align-items: center;
    justify-content: space-between;
    margin-top: 65%;
    z-index: 10000000000;
    position: absolute;
    img{
      width: 70rpx;
      height: 70rpx;
      z-index: 10000000002;
    }
  }
  .noItem{
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      margin-top: 33%;
      .noImgBox{
        width:305rpx;
        height: 200rpx;
        margin: 0 auto;
        img{
          width:100%;
          height: 100%;
        }
      }
      .txtBox{
        margin-bottom: 120rpx;
        text-align: center;
        .name{
          font-size:48rpx;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,84,83,1);
          margin-bottom: 20rpx;
          margin-top: 30rpx;
        }
        .msg{
          font-size:30rpx;
          font-family:PingFangSC-Light,PingFang SC;
          font-weight:300;
          color:rgba(153,153,153,1);
        }
      }
      .fotBtn{
        text-align: center;
        margin-bottom:56rpx;
        border: 0;
        padding: 0;
        img{
          width: 32rpx;
          height: 30rpx;
          margin-right: 20rpx;
          vertical-align: middle;
        }
        span{
          font-size:30rpx;
          font-weight:400;
          color:rgba(37,143,248,1);
          display: inline-block;
          vertical-align: middle;
          display: inline-block;
        }
      }
      .bomTit{
        position: absolute;
        bottom:30rpx;
        width: 40%;
        div{
          text-align: center;
          font-size:26rpx;
          vertical-align: middle;
          display: block;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(204,204,204,1);
          margin-bottom: 10rpx;
        }
      }
    }
    .outlineBox {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  .listBox{
      white-space: nowrap;
      position: relative;
      top: 0;
      display: flex;
      flex-direction: row;
      // width: 100%;
      transition: left 0.5s;
      height: 100%;
    .listItem{
      width: 100%;
      flex-shrink: 0;
      height: 100%;
    }
  }
  .topBox{
    height: 112rpx;
    padding: 30rpx 40rpx;
    margin-bottom: 16rpx;
    background: #FFFFFF;
    .titName{
      font-size:30rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .userName{
      font-size:50rpx;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
  }
  .centerBox{
    // padding: 24rpx 30rpx;
    // margin-bottom: 16rpx;
    background: #FFFFFF;
    .titClass{
      // margin-top:24rpx;
      padding-top: 24rpx;
      font-size:36rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-bottom: 23rpx;
    }
    .leftNav{
      display: inline-block;
      width:8rpx;
      height:24rpx;
      background:rgba(255,113,92,1);
      border-radius:4rpx;
      margin-right: 22rpx;
    }
    .numClass{
      padding-left: 30rpx;
      font-size:30rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      background:rgba(249,249,249,1);
      margin-bottom: 38rpx;
      height: 60rpx;
      line-height: 60rpx;
      span{
        color:#333333;
      }
    }
    .userBox{
      margin-bottom:25rpx;
      padding-left:30rpx;
      .nameClass{
        font-size:36rpx;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(37,143,248,1);
      }
      .deptClass{
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        // color:rgba(51,51,51,1);
        color:rgba(37,143,248,1);
      }
    }
    .timeBox{
      padding-left:30rpx;
      border-bottom: 20rpx solid #f9f9f9;
      padding-bottom: 20rpx;
      font-size:30rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
  }
  .bomBox{
    margin-bottom:16rpx;
     background: #FFFFFF;
    //  height: 100%;
    .titClass{
      // margin-top:24rpx;
      font-size:36rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-bottom: 23rpx;
      padding-top: 24rpx;
    }
    .leftNav2{
      display: inline-block;
      width:8rpx;
      height:24rpx;
      background:rgba(69,160,250,1);
      border-radius:4rpx;
      margin-right: 22rpx;
    }
    .msgBox{
      padding-left:30rpx;
      font-size:33rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(255,148,41,1);
      height: 64rpx;
      line-height: 64rpx;
      background:rgba(255,243,231,1);
      margin-bottom: 25rpx;
    }
    .codeBox{
      padding-left:35rpx;
      margin-bottom: 31rpx;
      padding-bottom: 20rpx;
      .labelClass{
        display: block;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        margin-bottom: 20rpx;
      }
      .redClass{
        color: #FF5453;
      }
    }
  }
  .fotBox{
      background: #FFFFFF;
      // height: 100%;
      // position: absolute;
      // bottom: 0rpx;
      // height: 300rpx;
      width: 100%;
      position: absolute;
      bottom: 0;
      .btnBox{
        //  position: absolute;
        //   bottom: 30rpx;
        height: 120rpx;
        // padding-top: 180rpx;
      }
      .btnClass{
        display: inline-block;
        width:330rpx;
        height:90rpx;
        background:rgba(255,255,255,1);
        border-radius:2rpx;
        border:1rpx solid rgba(204,204,204,1);
        font-size:36rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        text-align: center;
        line-height: 90rpx;
      }
      // .colorB{
      //   background: #404FDE;
      //   color:rgba(255,255,255,1);
      //   margin-right: 30rpx;
      //   margin-left:30rpx;
      // }
      .btnLeft{
        background: #4253E1;
        color:#FFFFFF;
        margin-right: 30rpx;
        margin-left:30rpx;
      }
      .btnCenter{
         width: 90%;
         margin-left: 5%;
       }
       .alreadyChat {
         color:rgba(102,102,102,1);
         background-color: #F9F9F9;
         border: none;
       }
       .verifyTips {
        display: inline-block;
        color: #80848f;
        width: 100%;
        white-space: normal;
        box-sizing: border-box;
        padding: 30rpx 40rpx;
        font-size: 32rpx;
      }
  }
  .isIpx {
    padding-bottom: 40rpx;
  }
  .modalClass{
    position: absolute;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 9;
    // background:rgba(0,0,0,1);
    // opacity:0.6;
    .modalBox{
      width: 617rpx;
      // height:663rpx;
      z-index:99;
      background: #FFFFFF;
      border-radius:12px;
      position: relative;
      .modalTit{
        width: 100%;
        img{
          width: 100%;
          height: 220rpx;
        }
      }
      .closeBox{
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        right: -30rpx;
        top: -30rpx;
        img{
          width: 100%;
          height: 100%;
          z-index:99;
        }
      }
      .modalCenter{
        font-size:36rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        height: 330rpx;
        text-align: center;
        line-height: 330rpx;
        // padding: 67rpx 30rpx 33rpx 37rpx;
        // display: flex;
        // flex-direction:column;
        // .picClass{
        //   height: 131rpx;
        //   line-height: 131rpx;
        //   text-align: center;
        //   border-top: 1rpx solid #E9E9E9;
        //   border-bottom: 1rpx solid #E9E9E9;
        //   div{
        //     font-size:50rpx;
        //     font-weight:normal;
        //     color:rgba(34,75,198,1);
        //   }
        // }
        // .dataBox{
        //   margin-bottom: 40rpx;
        //   span{
        //     display: inline-block;
        //     font-size:28rpx;
        //     font-weight:400;
        //     color:rgba(102,102,102,1);
        //     vertical-align: middle;
        //   }
        //   .itemPie{
        //     width:12rpx;
        //     height:12rpx;
        //     background:rgba(74,100,234,1);
        //     border-radius: 50%;
        //     margin-right: 15rpx;
        //     // vertical-align: middle;
        //     margin-bottom: 5rpx;
        //   }
        //   .itemSpan{
        //     width:95%;

        //   }
        // }
      }
      .modalFooter{
        div{
          width:309rpx;
          height:90rpx;
          font-size:36rpx;
          font-weight:400;
          display: inline-block;
          text-align:center;
          line-height:90rpx;
        }
       .btnLeft{
         background:rgba(247,248,250,1);
         border-radius:0rpx 0rpx 0rpx 24rpx;
         color:#333333;
       }
       .btnRight{
         background:rgba(74,100,234,1);
         border-radius:0rpx 0rpx 24rpx 0rpx;
         color:#ffffff;
       }
       
      }
      .btnDis{
        background: #c5c8ce;
      }
    }
  }
  .highterZIndex {
    z-index: 1000;
  }
  .chooseAccount {
    position: absolute;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 9;
    // background:rgba(0,0,0,1);
    // opacity:0.6;
    .modalBox {
      width: 617rpx;
      // height:663rpx;
      z-index: 99;
      background: #ffffff;
      border-radius: 12px;
      position: relative;
      .modalTit {
        width: 100%;
        img {
          width: 100%;
          height: 220rpx;
        }
      }
      .closeBox {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        right: -30rpx;
        top: -30rpx;
        img {
          width: 100%;
          height: 100%;
          z-index: 99;
        }
      }
      .modalCenter {
        padding: 67rpx 30rpx 33rpx 37rpx;
        display: flex;
        flex-direction: column;
        .picClass {
          height: 131rpx;
          line-height: 131rpx;
          text-align: center;
          border-top: 1rpx solid #e9e9e9;
          border-bottom: 1rpx solid #e9e9e9;
          div {
            font-size: 50rpx;
            font-weight: normal;
            color: rgba(34, 75, 198, 1);
          }
        }
        .dataBox {
          margin-bottom: 40rpx;
          span {
            display: inline-block;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            vertical-align: middle;
          }
          .itemPie {
            width: 12rpx;
            height: 12rpx;
            background: rgba(74, 100, 234, 1);
            border-radius: 50%;
            margin-right: 15rpx;
            // vertical-align: middle;
            margin-bottom: 5rpx;
          }
          .itemSpan {
            width: 95%;
          }
        }
      }
      .modalFooter {
        div {
          width: 309rpx;
          height: 90rpx;
          font-size: 36rpx;
          font-weight: 400;
          display: inline-block;
          text-align: center;
          line-height: 90rpx;
        }
        .btnLeft {
          background: rgba(247, 248, 250, 1);
          border-radius: 0rpx 0rpx 0rpx 24rpx;
          color: #333333;
        }
        .btnRight {
          background: rgba(74, 100, 234, 1);
          border-radius: 0rpx 0rpx 24rpx 0rpx;
          color: #ffffff;
        }
      }
      .btnDis {
        background: #c5c8ce;
      }
    }
  }
  .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  .init {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 660rpx;
    overflow: hidden;
    background: #fff;
    z-index: 9999999999;
    display: flex;
    flex-direction: column;
    .initTop {
      height: 90rpx;
      line-height: 90rpx;
      font-size: 34rpx;
      font-weight: bold;
      text-align: center;
      position: relative;
      border-bottom: 2rpx solid #e9e9e9;
      img {
        width: 45rpx;
        height: 45rpx;
        position: absolute;
        top: 26rpx;
        right: 20rpx;
      }
    }
    .initMid {
      flex: 1;
      .areaDiv {
        border-top: 1rpx solid #e9e9e9;
        border-bottom: 1rpx solid #e9e9e9;
        height: 110rpx;
        padding: 25rpx 30rpx;
      }
      .radio {
        margin-top: 30rpx;
      }
      .lastRadio {
        margin-bottom: 30rpx;
      }
      textarea {
        height: 80rpx;
        width: 100%;
      }
    }
    .initBtm {
      height: 160rpx;
      padding: 0rpx 45rpx 0 45rpx;
      div {
        margin-top: 20rpx;
        width: 100%;
        height: 100rpx;
        line-height: 90rpx;
        background: #4a64ea;
        border-radius: 46px;
        text-align: center;
        font-size: 32rpx;
        color: #fff;
        font-weight: bold;
      }
    }
  }
}
</style>
